<template>
  <scroll-view
    class="container"
    scroll-y
    :show-scrollbar="false"
    enhanced
    :scroll-top="scrollTop"
    scroll-with-animation
    @scroll="handleScroll"
  >
    <!-- 轮播图 -->
    <swiper
      indicator-dots
      indicator-color="#fff"
      indicator-active-color="#00cc99"
      autoplay
      circular
      interval="3000"
    >
      <swiper-item v-for="banner in BannerList" :key="banner.id">
        <navigator :url="banner.linkUrl">
          <image class="banner-img" :src="banner.imageUrl"></image>
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 导航 -->
    <view class="nav-container">
      <view class="nav-item" v-for="(cate, index) in hotCateList" :key="index">
        <img :src="cate.src" alt="cate.name" class="nav-image" />
        <span class="nav-name">{{ cate.name }}</span>
      </view>
    </view>
    <!-- 主体数据 -->
    <!-- 课程 -->
    <view class="home-course">
      <view class="left-title" > 热门课程 </view>
      <navigator class="right-text" url="/pages/course/list/index" open-type="switchTab"> 全部课程> </navigator>
    </view>
    <view class="course-list">
      <navigator
        class="course-item"
        v-for="course in courseList"
        :key="course.id"
        :url="`/pages/course/detail/index?id=${course.id}`"
      >
        <img :src="course.cover" :alt="course.title" class="course-image" />
        <view class="course-body">
          <view class="course-tag els">{{ course.title }}</view>
          <view class="course-data">
            <uni-icons type="fire" size="15" color="red"></uni-icons>
            <text> {{ course.viewCount }} 已学习 </text>
          </view>
          <view class="course-buttom">
            <text class="course-price">￥{{ course.price }} </text>
            <text class="course-buyCount">{{ course.buyCount }} 人购买 </text>
          </view>
        </view>
      </navigator>
    </view>
    <!-- 名师 -->
    <view class="home-course">
      <view class="left-title"> 名师大咖 </view>
      <navigator class="right-text" url="/pages/home/teacherList"> 全部名师> </navigator>
    </view>
    <view class="course-list">
      <navigator
        class="teacher-item"
        v-for="teacher in teacherList"
        :key="teacher.id"
        :url="`/pages/home/teacherList?id=${teacher.id}`"
      >
        <img :src="teacher.avatar" :alt="teacher.name" class="teacher-avatar" />
        <view class="teacher-text">
          <view class="teacher-career multi-row">
            {{ teacher.career }}
          </view>
          <view class="teacher-name">
            {{ teacher.name }}
          </view>
        </view>
      </navigator>
    </view>
    <BackToTop @setScrollTop="setScrollTop" v-if="oldScrollTop >= 600" />
  </scroll-view>
</template>

<script setup lang="ts">
import { nextTick, ref } from "vue";
import { reqGetBannerList, reqGerHomeData } from "../../api/home";
import type {
  BannerListType,
  CourseListType,
  TeacherListType,
} from "../../api/type";
import { onShow } from "@dcloudio/uni-app";
import BackToTop from "../../components/back-to-top/index.vue";

// 初始化定义轮播图列表
const BannerList = ref<BannerListType>([]);
// 初始化首页数据
const teacherList = ref<TeacherListType>([]);
const courseList = ref<CourseListType>([]);
// 导航栏
const hotCateList = [
  {
    src: "https://p.qpic.cn/qqconadmin/0/f310ebac024349818a459aa1f5413042/0",
    name: "后台开发",
  },
  {
    src: "https://p.qpic.cn/qqconadmin/0/38e56d79465841839852e652661d507a/0",
    name: "前端开发",
  },
  {
    src: "https://p.qpic.cn/qqconadmin/0/c5f85eeb180149f7b2f1a1e6894f8df9/0",
    name: "云计算",
  },
  {
    src: "	https://p.qpic.cn/qqconadmin/0/e7c8a2649635424ab82faad7fa9b2c3a/0",
    name: "大数据",
  },
  {
    src: "https://p.qpic.cn/qqconadmin/0/9b248c95c0c44301b4155d9ac173c9a1/0",
    name: "全部分类",
  },
];
// 获取首页轮播图列表
onShow(async () => {
  const res = await reqGetBannerList();
  // console.log(res);
  BannerList.value = res.bannerList;
});
// 获取首页数据
onShow(async () => {
  const res = await reqGerHomeData();
  // console.log(res);
  teacherList.value = res.teacherList;
  courseList.value = res.courseList;
});
// 回到顶部
const scrollTop = ref(0);
const oldScrollTop = ref(0);

interface ScrollEvent {
  detail: {
    scrollTop: number;
  };
}
const handleScroll = (e: ScrollEvent) => {
  oldScrollTop.value = e.detail.scrollTop;
};

const setScrollTop = async (val: number) => {
  scrollTop.value = oldScrollTop.value;

  await nextTick(); // 等用户界面更新完成，在触发
  scrollTop.value = val;
};
</script>

<script setup lang="ts"></script>

<style scoped>
.banner-img {
  width: 100%;
}
/* 导航 */
.nav-container {
  margin-top: 20rpx;
  display: flex;
}
.nav-item {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.nav-image {
  width: 80rpx;
  height: 80rpx;
}
.nav-name {
  font-size: 12px;
  color: #666666;
}
/* 热门课程标题 */
.home-course {
  margin: 20rpx;
  height: 60rpx;
  background-color: #00cc99;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.left-title {
  color: #323433;
}
.right-text {
  color: #666869;
  font-size: 14px;
}
/* 热门课程 */
.course-list {
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  justify-content: space-evenly;
}
.course-item {
  width: 345rpx;
  height: 345rpx;
  background-color: #eeeeee;
  margin-top: 20rpx;
}
.course-image {
  width: 100%;
  height: 185rpx;
}
.course-tag {
  font-size: 14px;
  font-weight: 600;
}
.course-data {
  font-size: 12px;
}
.course-body {
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 135rpx;
}
.course-price {
  margin-right: 20rpx;
  font-size: 14px;
  font-weight: 700;
  color: #fa3f4e;
}
.course-buyCount {
  font-size: 13px;
  margin-right: 50rpx;
}
/* 名师大咖*/
.teacher-item {
  width: 345rpx;
  height: 500rpx;
  background-color: #eeeeee;
  margin-top: 20rpx;
}
.teacher-avatar {
  width: 100%;
  height: 350rpx;
}
.teacher-text {
  padding: 10rpx;
}
.teacher-career {
  font-size: 12px;
  font-weight: 700;
}
.teacher-name {
  font-weight: 700;
  color: #00cc99;
  margin-top: 10rpx;
}
</style>
